<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>批量添加轮胎</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/auth.js"></script>
    <style>
        .axle-section {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #f8f9fa;
        }
        .tire-row {
            margin-bottom: 0.5rem;
            padding: 0.5rem;
            background-color: white;
            border-radius: 0.25rem;
        }
        .position-badge {
            background-color: #6c757d;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }
        .empty-tire {
            opacity: 0.7;
            background-color: #f8f9fa;
        }
        .photo-upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 0.375rem;
            padding: 0.75rem;
            background-color: #f8f9fa;
            transition: all 0.3s;
            cursor: pointer;
        }
        .photo-upload-area:hover {
            border-color: #0d6efd;
            background-color: #e9ecef;
        }
        .photo-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .photo-preview {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 0.25rem;
            overflow: hidden;
            border: 1px solid #dee2e6;
            background-color: white;
        }
        .photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .photo-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            line-height: 1;
        }
        .photo-count {
            font-size: 0.75rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }
        .photo-upload-btn {
            background-color: #0d6efd;
            color: white;
            border: none;
            border-radius: 0.25rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .photo-upload-btn:hover {
            background-color: #0b5ed7;
        }
        .photo-input-hidden {
            display: none;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
            font-size: 1.2rem;
        }
        .form-required::after {
            content: " *";
            color: #dc3545;
        }
        .readonly-field {
            background-color: #e9ecef;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/api/tires">轮胎管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/api/tires">轮胎列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/api/tires/batch-add">批量添加轮胎</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/api/tires/usage">查询使用记录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <h1>批量添加轮胎</h1>

    <!-- 错误提示 -->
    <div th:if="${error}" class="alert alert-danger">
        <span th:text="${error}"></span>
    </div>

    <!-- 成功提示 -->
    <div th:if="${param.success}" class="alert alert-success">
        轮胎添加成功！
    </div>

    <!-- 使用原生表单，不绑定对象 -->
    <form id="tireForm" method="post" enctype="multipart/form-data">
        <!-- 车辆信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">车辆信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="vehiclePlateNumber" class="form-label form-required">车头牌号</label>
                            <input type="text" class="form-control" id="vehiclePlateNumber"
                                   name="vehiclePlateNumber" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="trailerPlateNumber" class="form-label">挂车牌号</label>
                            <input type="text" class="form-control" id="trailerPlateNumber"
                                   name="trailerPlateNumber">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="transportCompany" class="form-label form-required">运输公司</label>
                            <input type="text" class="form-control" id="transportCompany"
                                   name="transportCompany" list="companyList" required>
                            <datalist id="companyList">
                                <option th:each="company : ${transportCompanies}"
                                        th:value="${company}"></option>
                            </datalist>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="installDate" class="form-label form-required">装胎日期</label>
                            <input type="date" class="form-control" id="installDate"
                                   name="installDate" th:value="${currentDate}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="installMileage" class="form-label form-required">装胎公里数</label>
                            <input type="number" class="form-control" id="installMileage"
                                   name="installMileage" value="0" min="0" required>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 轮胎信息 - 按轴分组 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">轮胎信息</h5>
                <small class="text-muted">最多6个轴，每个轴最多4个轮胎</small>
            </div>
            <div class="card-body">
                <!-- 1轴 (转向轴，最多2胎) -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">1轴</span> (转向轴，最多2胎)</h6>

                    <!-- 左外胎 -->
                    <div class="tire-row" data-tire-index="0" data-axle="1" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号"
                                       name="tires[0].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[0].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[0].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[0].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[0].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="0">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="0">
                                    <div class="photo-preview-container" id="photo-preview-0"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[0].axleNumber" value="1">
                                <input type="hidden" class="tire-position" name="tires[0].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 右外胎 -->
                    <div class="tire-row" data-tire-index="1" data-axle="1" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号"
                                       name="tires[1].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[1].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[1].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[1].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[1].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="1">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="1">
                                    <div class="photo-preview-container" id="photo-preview-1"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[1].axleNumber" value="1">
                                <input type="hidden" class="tire-position" name="tires[1].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2轴 -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">2轴</span> (固定4胎)</h6>

                    <!-- 2轴左外 -->
                    <div class="tire-row" data-tire-index="2" data-axle="2" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[2].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[2].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[2].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[2].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[2].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="2">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="2">
                                    <div class="photo-preview-container" id="photo-preview-2"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[2].axleNumber" value="2">
                                <input type="hidden" class="tire-position" name="tires[2].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 2轴左内 -->
                    <div class="tire-row" data-tire-index="3" data-axle="2" data-position="左内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[3].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[3].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[3].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[3].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[3].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="3">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="3">
                                    <div class="photo-preview-container" id="photo-preview-3"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[3].axleNumber" value="2">
                                <input type="hidden" class="tire-position" name="tires[3].tirePosition" value="左内">
                            </div>
                        </div>
                    </div>

                    <!-- 2轴右内 -->
                    <div class="tire-row" data-tire-index="4" data-axle="2" data-position="右内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[4].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[4].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[4].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[4].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[4].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="4">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="4">
                                    <div class="photo-preview-container" id="photo-preview-4"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[4].axleNumber" value="2">
                                <input type="hidden" class="tire-position" name="tires[4].tirePosition" value="右内">
                            </div>
                        </div>
                    </div>

                    <!-- 2轴右外 -->
                    <div class="tire-row" data-tire-index="5" data-axle="2" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[5].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[5].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[5].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[5].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[5].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="5">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="5">
                                    <div class="photo-preview-container" id="photo-preview-5"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[5].axleNumber" value="2">
                                <input type="hidden" class="tire-position" name="tires[5].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3轴 -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">3轴</span> (固定4胎)</h6>

                    <!-- 3轴左外 -->
                    <div class="tire-row" data-tire-index="6" data-axle="3" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[6].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[6].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[6].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[6].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[6].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="6">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="6">
                                    <div class="photo-preview-container" id="photo-preview-6"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[6].axleNumber" value="3">
                                <input type="hidden" class="tire-position" name="tires[6].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 3轴左内 -->
                    <div class="tire-row" data-tire-index="7" data-axle="3" data-position="左内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[7].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[7].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[7].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[7].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[7].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="7">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="7">
                                    <div class="photo-preview-container" id="photo-preview-7"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[7].axleNumber" value="3">
                                <input type="hidden" class="tire-position" name="tires[7].tirePosition" value="左内">
                            </div>
                        </div>
                    </div>

                    <!-- 3轴右内 -->
                    <div class="tire-row" data-tire-index="8" data-axle="3" data-position="右内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[8].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[8].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[8].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[8].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[8].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="8">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="8">
                                    <div class="photo-preview-container" id="photo-preview-8"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[8].axleNumber" value="3">
                                <input type="hidden" class="tire-position" name="tires[8].tirePosition" value="右内">
                            </div>
                        </div>
                    </div>

                    <!-- 3轴右外 -->
                    <div class="tire-row" data-tire-index="9" data-axle="3" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[9].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[9].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[9].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[9].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[9].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="9">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="9">
                                    <div class="photo-preview-container" id="photo-preview-9"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[9].axleNumber" value="3">
                                <input type="hidden" class="tire-position" name="tires[9].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 4轴 -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">4轴</span> (固定4胎)</h6>

                    <!-- 4轴左外 -->
                    <div class="tire-row" data-tire-index="10" data-axle="4" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[10].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[10].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[10].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[10].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[10].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="10">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="10">
                                    <div class="photo-preview-container" id="photo-preview-10"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[10].axleNumber" value="4">
                                <input type="hidden" class="tire-position" name="tires[10].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 4轴左内 -->
                    <div class="tire-row" data-tire-index="11" data-axle="4" data-position="左内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[11].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[11].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[11].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[11].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[11].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="11">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="11">
                                    <div class="photo-preview-container" id="photo-preview-11"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[11].axleNumber" value="4">
                                <input type="hidden" class="tire-position" name="tires[11].tirePosition" value="左内">
                            </div>
                        </div>
                    </div>

                    <!-- 4轴右内 -->
                    <div class="tire-row" data-tire-index="12" data-axle="4" data-position="右内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[12].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[12].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[12].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[12].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[12].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="12">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="12">
                                    <div class="photo-preview-container" id="photo-preview-12"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[12].axleNumber" value="4">
                                <input type="hidden" class="tire-position" name="tires[12].tirePosition" value="右内">
                            </div>
                        </div>
                    </div>

                    <!-- 4轴右外 -->
                    <div class="tire-row" data-tire-index="13" data-axle="4" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[13].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[13].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[13].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[13].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[13].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="13">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="13">
                                    <div class="photo-preview-container" id="photo-preview-13"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[13].axleNumber" value="4">
                                <input type="hidden" class="tire-position" name="tires[13].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 5轴 -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">5轴</span> (固定4胎)</h6>

                    <!-- 5轴左外 -->
                    <div class="tire-row" data-tire-index="14" data-axle="5" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[14].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[14].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[14].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[14].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[14].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="14">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="14">
                                    <div class="photo-preview-container" id="photo-preview-14"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[14].axleNumber" value="5">
                                <input type="hidden" class="tire-position" name="tires[14].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 5轴左内 -->
                    <div class="tire-row" data-tire-index="15" data-axle="5" data-position="左内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[15].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[15].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[15].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[15].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[15].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="15">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="15">
                                    <div class="photo-preview-container" id="photo-preview-15"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[15].axleNumber" value="5">
                                <input type="hidden" class="tire-position" name="tires[15].tirePosition" value="左内">
                            </div>
                        </div>
                    </div>

                    <!-- 5轴右内 -->
                    <div class="tire-row" data-tire-index="16" data-axle="5" data-position="右内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[16].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[16].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[16].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[16].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[16].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="16">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="16">
                                    <div class="photo-preview-container" id="photo-preview-16"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[16].axleNumber" value="5">
                                <input type="hidden" class="tire-position" name="tires[16].tirePosition" value="右内">
                            </div>
                        </div>
                    </div>

                    <!-- 5轴右外 -->
                    <div class="tire-row" data-tire-index="17" data-axle="5" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[17].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[17].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[17].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[17].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[17].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="17">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="17">
                                    <div class="photo-preview-container" id="photo-preview-17"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[17].axleNumber" value="5">
                                <input type="hidden" class="tire-position" name="tires[17].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 6轴 -->
                <div class="axle-section">
                    <h6><span class="badge bg-primary">6轴</span> (固定4胎)</h6>

                    <!-- 6轴左外 -->
                    <div class="tire-row" data-tire-index="18" data-axle="6" data-position="左外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[18].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[18].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[18].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[18].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[18].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="18">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="18">
                                    <div class="photo-preview-container" id="photo-preview-18"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[18].axleNumber" value="6">
                                <input type="hidden" class="tire-position" name="tires[18].tirePosition" value="左外">
                            </div>
                        </div>
                    </div>

                    <!-- 6轴左内 -->
                    <div class="tire-row" data-tire-index="19" data-axle="6" data-position="左内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">左内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[19].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[19].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[19].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[19].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[19].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="19">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="19">
                                    <div class="photo-preview-container" id="photo-preview-19"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[19].axleNumber" value="6">
                                <input type="hidden" class="tire-position" name="tires[19].tirePosition" value="左内">
                            </div>
                        </div>
                    </div>

                    <!-- 6轴右内 -->
                    <div class="tire-row" data-tire-index="20" data-axle="6" data-position="右内">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右内胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[20].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[20].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[20].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[20].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[20].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="20">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="20">
                                    <div class="photo-preview-container" id="photo-preview-20"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[20].axleNumber" value="6">
                                <input type="hidden" class="tire-position" name="tires[20].tirePosition" value="右内">
                            </div>
                        </div>
                    </div>

                    <!-- 6轴右外 -->
                    <div class="tire-row" data-tire-index="21" data-axle="6" data-position="右外">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <span class="position-badge">右外胎</span>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">轮胎号</label>
                                <input type="text" class="form-control tire-number" placeholder="输入轮胎号" name="tires[21].tireNumber">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">品牌</label>
                                <input type="text" class="form-control tire-brand" name="tires[21].tireBrand">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">型号</label>
                                <input type="text" class="form-control tire-model" name="tires[21].tireModel">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">单价</label>
                                <input type="number" step="0.01" class="form-control tire-price" name="tires[21].tirePrice" value="0">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">安装费</label>
                                <input type="number" step="0.01" class="form-control tire-install-cost" name="tires[21].installCost" value="0">
                            </div>
                            <div class="col-md-4">
                                <div class="photo-upload-area" data-tire-index="21">
                                    <label class="form-label">上传照片 (最多3张)</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <button type="button" class="photo-upload-btn me-2">选择照片</button>
                                        <span class="photo-count">已选择: <span class="photo-count-text">0</span>/3</span>
                                    </div>
                                    <input type="file" class="photo-input-hidden" multiple accept="image/*" data-max-files="3" data-tire-index="21">
                                    <div class="photo-preview-container" id="photo-preview-21"></div>
                                </div>
                            </div>
                            <div class="col-md-1 d-none">
                                <input type="hidden" class="tire-axle" name="tires[21].axleNumber" value="6">
                                <input type="hidden" class="tire-position" name="tires[21].tirePosition" value="右外">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary btn-lg">批量保存轮胎</button>
            <a href="/api/tires" class="btn btn-secondary btn-lg">取消返回</a>
        </div>
    </form>
</div>

<footer class="bg-dark text-white mt-5 py-4">
    <div class="container text-center">
        <p class="mb-0">轮胎管理系统 &copy; 2025</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 照片管理对象
    const tirePhotos = {};

    // 表单验证和空轮胎处理
    document.addEventListener('DOMContentLoaded', function() {
        // 根据用户角色设置运输公司和车头牌号
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
        const userRole = userInfo.role;
        const userTransportCompany = userInfo.transportCompany;
        const userVehiclePlateNumber = userInfo.vehiclePlateNumber;

        const transportCompanyInput = document.getElementById('transportCompany');
        const vehiclePlateNumberInput = document.getElementById('vehiclePlateNumber');

        if (userRole === 'COMPANY') {
            // 公司角色：固定运输公司，车头牌号可编辑
            if (transportCompanyInput) {
                transportCompanyInput.value = userTransportCompany || '';
                transportCompanyInput.readOnly = true;
                transportCompanyInput.classList.add('readonly-field');
            }
        } else if (userRole === 'DRIVER') {
            // 司机角色：固定运输公司和车头牌号
            if (transportCompanyInput) {
                transportCompanyInput.value = userTransportCompany || '';
                transportCompanyInput.readOnly = true;
                transportCompanyInput.classList.add('readonly-field');
            }
            if (vehiclePlateNumberInput) {
                vehiclePlateNumberInput.value = userVehiclePlateNumber || '';
                vehiclePlateNumberInput.readOnly = true;
                vehiclePlateNumberInput.classList.add('readonly-field');
            }
        }
        // 管理员角色：所有字段都可编辑，不需要特殊处理

        const form = document.getElementById('tireForm');
        const tireRows = document.querySelectorAll('.tire-row');
        const photoUploadAreas = document.querySelectorAll('.photo-upload-area');

        // 初始化照片管理对象
        for (let i = 0; i < 22; i++) {
            tirePhotos[i] = [];
        }

        // 实时检查轮胎号输入，为空时添加样式
        tireRows.forEach(row => {
            const tireNumberInput = row.querySelector('.tire-number');
            tireNumberInput.addEventListener('input', function() {
                if (this.value.trim() === '') {
                    row.classList.add('empty-tire');
                } else {
                    row.classList.remove('empty-tire');
                }
            });

            // 初始化样式
            if (tireNumberInput.value.trim() === '') {
                row.classList.add('empty-tire');
            }
        });

        // 照片上传处理
        photoUploadAreas.forEach(area => {
            const tireIndex = area.getAttribute('data-tire-index');
            const fileInput = area.querySelector('.photo-input-hidden');
            const uploadBtn = area.querySelector('.photo-upload-btn');
            const countText = area.querySelector('.photo-count-text');
            const previewContainer = document.getElementById(`photo-preview-${tireIndex}`);

            // 点击上传按钮触发文件选择
            uploadBtn.addEventListener('click', function() {
                fileInput.click();
            });

            // 点击整个区域也可以触发文件选择
            area.addEventListener('click', function(e) {
                if (e.target !== uploadBtn && e.target !== fileInput) {
                    fileInput.click();
                }
            });

            // 文件选择处理
            fileInput.addEventListener('change', function() {
                const maxFiles = parseInt(this.getAttribute('data-max-files'));
                const files = this.files;

                // 检查文件数量
                if (tirePhotos[tireIndex].length + files.length > maxFiles) {
                    alert(`最多只能上传${maxFiles}张照片`);
                    this.value = '';
                    return;
                }

                // 处理每个文件
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];

                    // 检查文件类型
                    if (!file.type.startsWith('image/')) {
                        alert('只能上传图片文件');
                        continue;
                    }

                    // 添加到照片数组
                    tirePhotos[tireIndex].push(file);

                    // 创建预览
                    createPhotoPreview(file, tireIndex, tirePhotos[tireIndex].length - 1);
                }

                // 更新计数
                updatePhotoCount(tireIndex);

                // 清空文件输入，以便可以再次选择相同文件
                this.value = '';
            });

            // 更新照片计数
            function updatePhotoCount(tireIndex) {
                countText.textContent = tirePhotos[tireIndex].length;
            }

            // 创建照片预览
            function createPhotoPreview(file, tireIndex, photoIndex) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const preview = document.createElement('div');
                    preview.className = 'photo-preview';
                    preview.setAttribute('data-photo-index', photoIndex);

                    const img = document.createElement('img');
                    img.src = e.target.result;

                    const removeBtn = document.createElement('button');
                    removeBtn.className = 'photo-remove';
                    removeBtn.innerHTML = '×';
                    removeBtn.type = 'button';

                    removeBtn.addEventListener('click', function() {
                        // 从照片数组中移除
                        tirePhotos[tireIndex].splice(photoIndex, 1);

                        // 移除预览
                        preview.remove();

                        // 更新所有预览的索引
                        updatePhotoPreviews(tireIndex);

                        // 更新计数
                        updatePhotoCount(tireIndex);
                    });

                    preview.appendChild(img);
                    preview.appendChild(removeBtn);
                    previewContainer.appendChild(preview);
                };

                reader.readAsDataURL(file);
            }

            // 更新所有照片预览的索引
            function updatePhotoPreviews(tireIndex) {
                const previews = previewContainer.querySelectorAll('.photo-preview');
                previews.forEach((preview, index) => {
                    preview.setAttribute('data-photo-index', index);

                    // 更新删除按钮的事件处理
                    const removeBtn = preview.querySelector('.photo-remove');
                    removeBtn.onclick = function() {
                        // 从照片数组中移除
                        tirePhotos[tireIndex].splice(index, 1);

                        // 移除预览
                        preview.remove();

                        // 更新所有预览的索引
                        updatePhotoPreviews(tireIndex);

                        // 更新计数
                        updatePhotoCount(tireIndex);
                    };
                });
            }
        });

        // 表单提交处理 - 使用 Fetch API
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            let hasError = false;
            const tireNumbers = new Set();


            // 创建轮胎数据数组
            const tireData = [];
            tireRows.forEach(row => {
                const tireIndex = row.getAttribute('data-tire-index');
                const tireNumberInput = row.querySelector('.tire-number');

                if (tireNumberInput.value.trim() !== '') {
                    const tireInfo = {
                        tireNumber: tireNumberInput.value.trim(),
                        tireBrand: row.querySelector('.tire-brand').value,
                        tireModel: row.querySelector('.tire-model').value,
                        tirePrice: parseFloat(row.querySelector('.tire-price').value) || 0,
                        installCost: parseFloat(row.querySelector('.tire-install-cost').value) || 0,
                        axleNumber: parseInt(row.querySelector('.tire-axle').value),
                        tirePosition: row.querySelector('.tire-position').value
                    };
                    tireData.push(tireInfo);
                }
            });

            // 创建FormData
            const formData = new FormData();

            // 添加车辆信息 - 注意：对于司机角色，后端会覆盖这些值为用户注册信息
            formData.append('vehiclePlateNumber', document.getElementById('vehiclePlateNumber').value);
            formData.append('trailerPlateNumber', document.getElementById('trailerPlateNumber').value);
            formData.append('transportCompany', document.getElementById('transportCompany').value);
            formData.append('installDate', document.getElementById('installDate').value);
            formData.append('installMileage', document.getElementById('installMileage').value);

            // 添加轮胎数据JSON
            formData.append('tireData', JSON.stringify(tireData));

            // 添加照片文件
            let photoCount = 0;
            tireRows.forEach(row => {
                const tireIndex = row.getAttribute('data-tire-index');
                const tireNumberInput = row.querySelector('.tire-number');

                if (tireNumberInput.value.trim() !== '') {
                    const photos = tirePhotos[tireIndex] || [];
                    photos.forEach((photo, photoIndex) => {
                        // 关键修复：为每个照片创建唯一的字段名
                        formData.append(`photos[${tireIndex}][${photoIndex}]`, photo);
                        photoCount++;
                        console.log(`添加照片[${tireIndex}][${photoIndex}]: ${photo.name}, 大小: ${photo.size} bytes`);
                    });
                }
            });

            // 使用fetch API提交表单
            fetch('/api/tires/batch-add', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (response.ok) {
                        window.location.href = '/api/tires?success=true';
                    } else {
                        return response.json().then(data => {
                            throw new Error(data.message || '保存失败');
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('保存失败: ' + error.message);
                })
                .finally(() => {
                    // 移除加载遮罩
                    if (document.body.contains(loadingOverlay)) {
                        document.body.removeChild(loadingOverlay);
                    }
                });
        });
    });
</script>
</body>
</html>